<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">
      <el-button
        type="primary"
        @click="handleAdd">添加</el-button>
      <!--列表-->
      <el-table :data="DList" highlight-current-row v-loading="loading" style="width: 100%;">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="任务名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所需设备">
                <span>{{ props.row.deviceList }}</span>
              </el-form-item>
              <el-form-item label="任务教程">
                <a :href="props.row.course">点击查看</a>
              </el-form-item>
              <el-form-item label="任务视频">
                <a :href="props.row.video">点击查看</a>
              </el-form-item>
              <el-form-item label="任务仿真">
                <span><a :href="props.row.simulation">点击下载</a></span>
              </el-form-item>
              <el-form-item label="仿真步骤描述">
                <span v-html="props.row.SDescription"></span>
              </el-form-item>
              <el-form-item label="案例验证点">
                <span v-for="point in props.row.checkpoint">
                  <b>验证点：{{ point.name }}</b>
                  <br/>
                  主设备：{{ point.main }}
                  <br/>
                  连接设备：{{ point.connect }}
                  <br/>
                </span>
              </el-form-item>
              <el-form-item label="案例步骤描述">
                <span v-html="props.row.PDescription"></span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="任务名称" sortable>
        </el-table-column>
        <el-table-column prop="totalTime" label="学习时间" sortable>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <!--<el-table-column prop="age" label="name数量" width="100" sortable>-->
        <!--</el-table-column>-->
      </el-table>
      <el-dialog title="查看教程" :visible.sync="dialogCFormVisible" size="large">
        <div>
          <div>
            <el-button @click="prev">上一页</el-button>
            <el-button @click="next">下一页</el-button>
            &nbsp; &nbsp;
            <span>Page: <span v-text="page_num"></span> / <span v-text="page_count"></span></span>
          </div>
          <canvas id="the-canvas"></canvas>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogCFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog title="查看视频" :visible.sync="dialogVFormVisible" size="large">
        <video preload="auto" width="800" height="500" controls
               :src="video.videoUrl" type='video/mp4'>
        </video>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVFormVisible = false;video.videoUrl=''">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import headTop from './head.vue'
  //  import {baseUrl, baseImgPath} from '@/config/env'
  import {getTaskList, TaskListDel} from '@/api/api'
  export default {
    data () {
      return {
        video: {
          videoUrl: ''
        },
        selectTable: {},
        dialogCFormVisible: false,
        dialogVFormVisible: false,
        menuOptions: [],
        selectMenu: {},
        DList: [],
        selectIndex: null,
        pageNum: 1,
        pageRendering: false,
        pageNumPending: null,
        scale: 0.8,
        page_num: 0,
        page_count: 0,
        pdfDoc: null
      }
    },
    components: {
      headTop
    },
    created () {
      this.initData()
    },
    watch: {  // 跳转的时候会调用
      '$route': 'initData'
    },
    methods: {
      // 获取设备列表
      async initData () {
        this.loading = true
        this.selectTable.name = '' // 重置输入框内容
        try {
          getTaskList().then((res) => {
            this.DList = res.data
            this.loading = false
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },
      handleAdd () {
        this.$router.push({path: '/manage/createTask'})
      },
      handleSelect (index) {
        this.selectIndex = index
        this.selectMenu = this.menuOptions[index]
      },
      async handleDelete (index, row) {
        TaskListDel(row.id).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.DList.splice(index, 1)
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '删除失败,该任务已经发布，请先删除发布列表'
          })
          console.log('类型删除失败', error)
        })
      },
      async handleEdit (row) {
        this.$router.push({name: '新增任务', params: {taskId: row.id}})
      }
    },
    computed: {
      ctx () {
        let id = document.getElementById('the-canvas')
        return id.getContext('2d')
      }
    }
  }

</script>

<style scoped>
  .el-button {
    margin: 5px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>


